'use client';
import dynamic from 'next/dynamic';
import styles from './styles.module.scss';
// import { useGlobeData } from '../../hooks/useGlobeData';
import numerBG from './bg-number-item@2x.png';
import { useAuthStore } from '@/store/useAuthStore';
import useSWR from 'swr';
import { getStatisticsDataApi } from '@/api/supplyChainNetwork';
import { px2vw, px2vh, responsive } from '@/app/cg06/utils/responsive'; 

const AnimatedNumber = dynamic(() => import('react-flip-numbers'), {
	ssr: false
});

export default function ScrolledOrderNumber() {
	const token = useAuthStore(s => s.token);
	const { data } = useSWR(
		() => (token ? '/big-screen/screen/businessIndicator/globalSupply/refreshStatistics' : null),
		getStatisticsDataApi,
		{
			// circle / 36s
			refreshInterval: 1000 * 60 * 1
		}
	);
	return (
		<div className={styles.scrollNumbersBox}>
			<div className={styles.wrapper}>
				<div className={styles.scrollNumbers} style={{
							marginRight: px2vw(32)
						}}>
					<div
						style={{
							marginRight: px2vw(36)
						}}
						className={styles.scrollNumberLabel}
					>
						近30日出运量
					</div>
					<div>
						<AnimatedNumber
							numberClassName={styles.animatedNumberItem}
							height={56}
							width={40}
							color="white"
							background="transparent"
							play
							perspective={400}
							nonNumberStyle={{
								height: px2vh(40),
								width: px2vw(20),
								color: '#fff',
								fontSize: px2vw(40),
								display: 'inline-flex',
								alignItems: 'center',
								justifyContent: 'center'
							}}
							numberStyle={{
								fontSize: px2vw(36),
								marginRight: px2vw(15),
								display: 'inline-block'
							}}
							numbers={Number(data?.oceanLastThrityDayTeu || 0).toLocaleString()}
							// numbers={Number(data?.oceanQuantity || 0).toLocaleString()}
						/>
					</div>
					<div
						style={{
							marginLeft: '10px'
						}}
						className={styles.scrollNumberLabel}
					>
						TEU
					</div>
				</div>
				{/* <div className={styles.scrollNumbers}>
					<div
						style={{
							marginRight: '10px'
						}}
						className={styles.scrollNumberLabel}
					>
						当月集拼出运量
					</div>
					<div>
						<AnimatedNumber
							numberClassName={styles.animatedNumberItem}
							width={40}
							height={56}
							color="white"
							background="transparent"
							play
							perspective={400}
							nonNumberStyle={{
								height: '40px',
								width: '20px',
								color: '#fff',
								fontSize: '40px',
								display: 'inline-flex',
								alignItems: 'center',
								justifyContent: 'center'
							}}
							numberStyle={{
								fontSize: '36px'
							}}
							numbers={(Math.round(Number(data?.dedicatedLineOrderMonthVal || 0) * 100)/100).toLocaleString()}
						/>
					</div>
					<div
						style={{
							marginLeft: '10px'
						}}
						className={styles.scrollNumberLabel}
					>
						CBM
					</div>
				</div> */}
			</div>
		</div>
	);
}

